<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">请选择员工</view>

            <scroll-view scroll-y="true" class="h-[70vh] pt-[10rpx]">

                <view v-for="(item, index) in employeeList" :key="item.employeeId"
                    class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] "
                    :class="{
                        'mb-[var(--top-m)]': employeeList.length - 1 != index, 'text-[var(--primary-color)] !border-[var(--primary-color)]': employee.filter((ele) => {
                            return ele.employeeId == item.employeeId
                        }).length
                    }" @click="selectEmployee(item)">
                    <view class="flex items-center w-[100%] py-[20rpx]">
                        <view class="w-[100rpx] h-[100rpx] rounded-[8rpx] relative">
                            <image
                                :src="item.avatar || 'https://files.meton.vip/2310e2533cff85c0f22420d6b0950a372b769f45ed8a720cfbd9597a5fdd5c42.png'"
                                class="w-[100rpx] h-[100rpx] rounded-[var(--rounded-mid)]"></image>
                            <image class="w-[20rpx] h-[20rpx] absolute right-0 bottom-0"
                                :src="item.sex == 1 ? 'http://files.meton.vip/09d8d7f71c0df8949ea6922aedd3026cb70db9ba50fe748d969a96e537f18f39.png' : 'http://files.meton.vip/c5c240342d2925853f957ce6a4b5b98f0ecfeadbd500aed3424ad0f733ee7c0f.png'">

                            </image>
                        </view>
                        <view class="flex-1  flex items-center ml-[20rpx]   box-border py-[30rpx] border-0">
                            <view class="flex-1">
                                <view class="text-[32rpx] text-[#333] font-bold truncate max-w-[260rpx]">{{
                                    item.employeeName }}
                                    <text class="text-[26rpx] ">（{{
                                        item.job }}）</text>
                                </view>
                                <!-- <view class="text-[26rpx] text-[var(--text-color-light9)] mt-[16rpx]">
                                    {{ item.job }}
                                </view> -->
                            </view>
                            <view class=" w-[250rpx] flex text-[#303133] justify-end items-center">
                                <input type="digit" v-model="item.proportion"
                                    class="text-right text-[#333] text-[32rpx]" placeholder="请输入销售比例"
                                    placeholder-class="text-[var(--text-color-light9)] text-[28rpx]">
                                <text class="text-[32rpx] ml-[10rpx]">%</text>

                            </view>

                        </view>
                    </view>

                </view>
                <view v-if="!employeeList || employeeList && !employeeList.length"
                    class="text-[var(--text-color-light6)] text-[32rpx] text-center">暂无员工</view>

            </scroll-view>
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" @click="confirm">确认</button>
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { getSystemEmployeeList } from '@/app/api/employee'



const employeeList = ref<object[]>([])
const show = ref(false)
const employee = ref<any[]>([])
const emits = defineEmits(['confirm'])

const prop = defineProps({
    isRadio: {
        type: Boolean,
        default: false
    }
})





const open = (employeeStr: any) => {
    show.value = true
    if (!employeeList.value.length) {
        getSystemEmployeeList().then(({ data }) => {
            console.log(data)

            employeeList.value = data


        }).catch()
    }
    employee.value = employeeStr

}

const selectEmployee = (data: object) => {

    if (prop.isRadio) {
        employee.value = []
    }

    if (!employee.value.filter((ele) => {
        return ele.employeeId == data.employeeId
    }).length) {
        employee.value.push(data)
    } else {
        employee.value = employee.value.filter((ele) => {
            return ele.employeeId != data.employeeId
        });
    }
    countProportion()
}
const countProportion = () => {
    let divisor = employee.value.length; //被除数 参与分成的人数
    let countnum = 100 / divisor; //分成比例平均分
    let num = Math.floor(countnum * 100) / 100;
    let difference = 100 - num * divisor;
    let firstProportion = num + difference;
    employee.value.forEach((ele, index) => {
        if (index == 0) {
            ele.proportion = Number(firstProportion.toFixed(2));
        } else {
            ele.proportion = Number(num.toFixed(2));
        }
    });
};

const confirm = () => {
    emits('confirm', employee.value.map((user) => {
        return {
            employeeId: user.employeeId,
            proportion: user.proportion,
            employeeName: user.employeeName
        }
    }))
    show.value = false
}

defineExpose({
    open,
    employeeList
})
</script>

<style lang="scss" scoped></style>
